Settings
Hi! Here some our recommendations to get the best out of BLACKBOX:
Be as clear as possible
End the question in what language you want the answer to be, e.g: ‘connect to mongodb in python
or you can just
Watch tutorial video
Here are some suggestion (choose one):
Write a function that reads data from a json file
How to delete docs from mongodb in phyton
Connect to mongodb in nodejs
send refresh
Blackbox AI Chat is in beta and Blackbox is not liable for the content generated. By using Blackbox, you acknowledge that you agree to agree to Blackbox's Terms and Privacy Policy

Passing and Receiving Props

Firat Atalay
7 min readJun 19

It’s time to introduce yet another fundamental React concept, which is props. And props is essentially how we pass data between components. And in particular, from parent components to child components. So we can imagine props as being like a communication channel between a parent and a child component.

So in practice, what we’re going to do, is to now customize each of these pizza components that we have right here. So, remember how we created the pizza component which has this image, the pizza name, and the ingredients. But right now all of the pizzas are the same because, well, we didn’t have a way of passing different data into them to make each of them customized. But now, as we learn about props, we will be able to do that. So, first of all, let’s grab our pizza component and cut it from here and place it right after the menu, just so we can see what’s happening. And then let’s get rid of this repetition here for now. So we only want this one pizza component here for now. Okay, and so now it’s time to pass the data from this parent component here, which is the menu in this case, to the pizza component. So what we want to pass is basically this string right here.So, the link to the image, then the name of the pizza, and the ingredients.

So to define props, we do it in two steps.

First, we pass the props into the component, and then second, we receive the props in the component that we pass them into.

So, here is where we pass those props in. And we write them just like this. So, just as if they were normal attributes. So, pizza spinaci. That’s the first one. Then, let’s also define a prop for the ingredient. And by the way, prop simply stands for property. It’s just a short for, yeah, property. Okay? And then finally, let’s say the photo or photo name. And then let’s grab this one here. All right. And maybe let’s also pass in a price. And for now, I will also pass it as a string but I will show you something in a minute. So for now, just write it like this. Give it a save; and then Prettier will format everything nicely like this. And now we need to go to the second step, which is to actually receive the props here inside the child component. So right now, of course, the component has no way of knowing that these four props have been passed in. So, the way we do that, is to accept a props parameter here in this component. And then for starters, let’s just lock this props to the console; and take a look at what’s happening. And, we already can see something here. So, this props is basically this object right here; and it has name, then pizza spinach, which is exactly this. So, what happened, as React included this pizza component, it basically called function in past in this props object. And this props object is made out of these four props that we passed into the component. And so now we can use this props object to replace all of these values here. Now, we need to take these values out of the object; and therefore, we need JavaScript, right? So here, this is no longer a string; but we need to enter JavaScript mode again.

So, props dot photo name is this one. And here, it is the name of the pizza. And again, we need JavaScript mode. So, props dot name. The same thing down here. So, props dot name. And finally, down here, we want props dot ingredients. Or actually, it’s ingredient. Let’s fix that here. Ingredients and ingredients down here. Okay. And of course, now everything still looks the same; because the data that we had here before, is exactly the data that we have here.

But now let’s actually make some magic happen. So, let’s create another pizza component; and then, this is where we will see why props are so useful. So let’s create a pizza funghi. Let’s give it some ingredients. So tomato, let’s say also mushrooms. And this is not important here. This is just to show you that we can now fully customize our components. Next, we can define the price. And notice that I’m doing it now in a different order. So here I had first a photo name and the price. And this is just to show you that the order in which we pass in the props is completely irrelevant. So, photo name is pizzas slash funghi dot jpg. Okay? And now we need to immediately close this component just like before. And as I save it, watch what happened here. And there is our second pizza component now with completely different data.

And so now for the first time, we have reused a component and configured it in a way that makes each component unique and display their own data. Okay? And now let’s just improve this pizza component here a little bit. So for starters, in our CSS, we actually have a class name here. So a class name called pizza. Okay? And then let’s also place these two here, inside their own div, so that this data can be displayed at the site of the image. So just like here in our original. So this is what we’re going for. So here we have a div, and then again, I’m using that trick where I simply push down that line. And this is already looking a lot nicer. Let’s just finally also add the price here and I’m doing that as a span. So props dot price. And there it is. But now let’s say that we wanted for some reason to add a number here. So we wanted to increase all the prices by three, let’s say. But watch what happens when we try this. So all the prices plus three.

So, what happens, is that React, or JavaScript, basically simply added the three here to the end of this number. And the reason for that is that here we pass these numbers actually in as a string. And we can see that also here in this output. So we do not want a string here.Instead, we want a number. And so the way we can achieve that is by entering again, JavaScript mode. And so in JavaScript, this is now an actual number.And so watch what happens.

Indeed, now we have 13; which is the 10 we had before, plus three. Okay? Then let’s do the same thing here. And that fixes this. So, this is very important to notice that whenever you want to pass in something that is not a string, you just use, again, this JavaScript mode basically. Because, in fact, you can pass in anything as a prop. So it doesn’t have to be a string or a number. You can pass in a array or objects or even other React components. So props is really really powerful and really one of the most fundamental things in React. And now to review this concept and to go even a bit further let’s move on to the next lecture.

BONUS:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";

// const pizzaData = [
// {
// name: "Focaccia",
// ingredients: "Bread with italian olive oil and rosemary",
// price: 6,
// photoName: "pizzas/focaccia.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Margherita",
// ingredients: "Tomato and mozarella",
// price: 10,
// photoName: "pizzas/margherita.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Spinaci",
// ingredients: "Tomato, mozarella, spinach, and ricotta cheese",
// price: 12,
// photoName: "pizzas/spinaci.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Funghi",
// ingredients: "Tomato, mozarella, mushrooms, and onion",
// price: 12,
// photoName: "pizzas/funghi.jpg",
// soldOut: false,
// },
// {
// name: "Pizza Salamino",
// ingredients: "Tomato, mozarella, and pepperoni",
// price: 15,
// photoName: "pizzas/salamino.jpg",
// soldOut: true,
// },
// {
// name: "Pizza Prosciutto",
// ingredients: "Tomato, mozarella, ham, aragula, and burrata cheese",
// price: 18,
// photoName: "pizzas/prosciutto.jpg",
// soldOut: false,
// },
// ];

function App() {
return (
<div className="container">
<Header />
<Menu />
<Footer />
</div>
);
}

function Header() {
// const style = { color: "red", fontSize: "48px", TextTransform: "uppercase" };
const style = {};

return (
<header className="header footer">
<h1 style={style}> Fast React Pizza Co. </h1>;
</header>
);
}

function Menu() {
return (
<main className="menu">
<h2>Our Menu</h2>
<Pizza
name="Pizza spinaci"
ingredients="Tomato, mozarella, spinach, and ricotta cheese"
photoName="pizzas/spinaci.jpg"
price={10}
/>
<Pizza
name="Pizza Funghi"
ingredients="Tomato, mushrooms"
photoName="pizzas/funghi.jpg"
price={12}
/>
</main>
);
}

function Pizza(props) {
console.log(props);
return (
<div className="pizza">
<img src={props.photoName} alt={props.name}></img>
<div>
<h3> {props.name}</h3>
<p>{props.ingredients} </p>
<span>{props.price + 3} </span>
</div>
</div>
);
}
function Footer() {
const hour = new Date().getHours();
const openHour = 8;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);
return (
<footer className="footer">
{new Date().toLocaleTimeString()}. We're currently open
</footer>
);

// React.createElement("footer",null,"We're currently open" )
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

console.log(props);